<template>
  <div class="common-card">
    <div class="title">{{ title }}</div>
    <div class="value">{{ value }}</div>
    <div class="chart">
      <slot></slot>
    </div>
    <div class="line"></div>
    <div class="bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CommonCard",
});
</script>

<script setup lang="ts">
defineProps<{
  title: string;
  value: number;
}>();
</script>

<style scoped>
.title {
  font-size: 12px;
  color: #888;
}

.value {
  font-size: 26px;
  margin: 5px 0;
  letter-spacing: 1px;
}

.chart {
  height: 50px;
}

.line {
  border: 1px solid #eee;
  margin: 10px 0;
}

.bottom {
  font-size: 12px;
  color: #666;
}
</style>
